<template>
  <div>
    <div v-for="(item, index) in collects" :key="item.id" style="display: inline-block">
      <img :src="item.videoCover" style="width: 300px; height: 168px">
      {{ item.videoName }}
      <el-button @click="cancelCollect(item.id, item.videoId)">取消收藏</el-button>
    </div>
  </div>
</template>

<script>
import { listCollect, delCollect } from '@/api/collect'
import { collectBehavior, getVideo } from '@/api/video'

export default {
  name: 'collection',
  data () {
    return {
      collectsFormServe: [],
      collects: []
    }
  },
  methods: {
    async cancelCollect (id, videoId) {
      await delCollect(id)
      await collectBehavior({
        operation: false,
        SysCollect: {
          userId: JSON.parse(localStorage.getItem('user')).userId,
          videoId: videoId
        }
      })
      this.collects = this.collects.filter(item => item.id !== id)
    }
  },
  async created () {
    const res = await listCollect()
    this.collectsFormServe = res.data.rows
    for (const collect of this.collectsFormServe) {
      const temp = await getVideo(collect.videoId)

      const videoName = temp.data.data.videoName
      const videoCover = temp.data.data.videoCover
      this.collects.push({
        ...collect,
        videoName: videoName,
        videoCover: videoCover
      })
    }
  }
}
</script>

<style scoped lang="less">

</style>
